<template>
    <div class="content-son">
        <div class="house-day">
            <span class="authentication" v-if="listitem.supplyDemandType==='CAPABILITY_SERVICE'">能力服务</span>
            <span class="authentication" v-if="listitem.supplyDemandType==='EQUIPMENT_LEASING'" style="background-color: #a7cddc;">设备租赁</span>
            <span class="authentication" v-if="listitem.supplyDemandType==='LABOR_FORCE'" style="background-color: #dbc1a4;">劳动力</span>
            <span class="authentication" v-if="listitem.supplyDemandType==='OTHER_SERVICE'" style="background-color: #e3e3e3;">其他服务</span>
            <div class="img-bos">
                <nuxt-link :to="`/qiao/s/detail/${listitem.id}`">
                    <el-image
                        style="width: 245px; height: 180px"
                        :src="`${basefile}${listitem.fileShowUrl}?x-oss-process=image/resize,w_${245}`"
                        :lazy="true"
                        fit="contain">
                        <div slot="error" class="image-slot">
                            <img src="~/static/img/sq/moren.jpg" alt="">
                        </div>
                    </el-image>
                    <!-- <img class="pictire" :src="`${basefile}${listitem.fileShowUrl}`" alt=""> -->
                </nuxt-link>
            </div>
        </div>
        <nuxt-link :to="`/qiao/s/detail/${listitem.id}`">
            <div class="moneys">
                <span v-if="listitem.discussionFlag===1" style="color:red;">商议</span><span v-else class="much">{{'￥'+tofloat(listitem.servicePrice)}}</span><span class="address">{{listitem.serviceLocationProvince.label}}</span>
            </div>
        </nuxt-link>
        <div class="build-titles">
            <nuxt-link :to="`/qiao/s/detail/${listitem.id}`">
                <span class="leter-title">{{FILTER_FORMATER.wordNum(listitem.serviceName,12)}}</span><span v-if="listitem.supplyDemandType=='EQUIPMENT_LEASING'" class="flrt">{{listitem.equipmentNum+'台'}}</span>
                <span v-if="listitem.supplyDemandType=='LABOR_FORCE'" class="flrt">{{listitem.peopleNum+'人'}}</span>
            </nuxt-link>
        </div>
        <div class="nearnum">
            <nuxt-link :to="`/qiao/s/detail/${listitem.id}`">
                <span class="neartitle">{{FILTER_FORMATER.wordNum(listitem.shopTitle,14)}}</span>
            </nuxt-link>
            <span class="flex flex-center wep span-btn-item" @click="open53Server">
                <i class="icon icon-weixin_hover"></i>
                <i class="icon icon-weixin"></i>
            </span>
        </div>
        <div class="evaluate">
            <img class="img-qy" src="~/static/img/qd/qy.png" alt="" v-if="listitem.enterpriseCertification&&listitem.enterpriseRealStatus==2">
            <span class="ping">评</span><span class="num">{{listitem.totalScore||4.6}}</span>
        </div>
    </div>
</template>

<script lang="ts">
import {Component, Vue, Prop} from 'nuxt-property-decorator'
import {open53Server} from '~/method'
@Component({
    components: {
    }
})
export default class ServiceList extends Vue {
    @Prop({
        type: Object,
        default: {}
    })
    listitem!: {}
    total: number = 100
    basefile: string = this.$store.state.basefile
    list:any = []
    mounted () {
        this.list = this.listitem
    }
    tofloat (val:any) {
        const num = parseFloat(val)
        let number = ''
        if (num < 10000) {
            number = (num / 1).toFixed(2) + '元'
        } else if (val === '') {
            number = '商议'
        } else {
            number = (num / 10000).toFixed(2) + '万元'
        }
        return number
    }
    open53Server () {
        open53Server()
    }
}
</script>
<style lang="scss" scoped>
.flrt{
    color: black;
}
.span-btn-item{
        font-size: 14px;
        color: #666;
        margin-left: 10px;
        .icon{
            margin-right: 4px;
        }
        .icon-weixin_hover{
            display: none;
        }
        &:hover{
            color: #11a9e8;
            .icon-weixin_hover{
                display: inline-block;
            }
            .icon-weixin{
                display: none;
            }
        }
    }
.wep{
    display: inline-block;
    float: right;
    margin-right: 10px;
}
        .content-son{
            border-radius: 3px;
            // width: 290px;
            // height: 380px;
            // margin-bottom: 20px;
            background-color: #fff;
            padding: 20px;
            .img-bos{
                width: 245px;
                height: 180px;
            }
            .pictire{
                width: 100%;
                height: 100%;
                background-color: #666666;
            }
            &:hover{
                box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
            }
        }
        .authentication{
            position: absolute;
            display: inline-block;
            width: 60px;
            height: 22px;
            line-height: 22px;
            background-color: #a9d2c9;
            color: #fff;
            font-size: 12px;
            text-align: center;
            z-index: 2;
        }
        .house-day{
            position: relative;
        }
        .flspan{
            float: right;
        }
        .build-titles{
            color: #666666;
            width: 100%;
            font-size: 16px;
            position: relative;
            // height: 50px;
            // margin-bottom: 20px;
            // display: -webkit-box;
            // -webkit-line-clamp: 1;
            // overflow: hidden;
            // line-break: normal;
            // -webkit-box-orient: vertical;
            .flrt{
                float: right;
                margin-right: 18px;
                position: absolute;
                right: 0px;
                top: 0px;
            }
            .leter-title{
                color: black;
                width: 200px;
                height: 30px;
                line-height: 30px;
                margin-bottom: 10px;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                overflow: hidden;
                -webkit-line-break: auto;
                -webkit-box-orient: vertical;
            //     display: -webkit-box;
            // -webkit-line-clamp: 1;
            // overflow: hidden;
            // line-break: normal;
            // -webkit-box-orient: vertical;
            }
        }
        .nearnum{
            height: 24px;
            line-height: 24px;
            width: 100%;
            font-size: 14px;
            color: #666666;
            margin-bottom: 3px;
            .neartitle{
                color: black;
            }
        }
        .moneys{
            width: 100%;
            height: 56px;
            line-height: 56px;
        }
        .much{
            color: #ff5a5a;
            font-size: 20px;
        }
        .days{
            font-size: 14px;
        }
        .address{
            float: right;
            margin-right: 15px;
            font-size: 12px;
            color: #999999;
        }
        .mybtn{
            width: 100px;
            height: 32px;
            background-color: #fff;
            color: #6cc1ee;
            border: 2px solid #6cc1ee;
            display: inline-block;
            line-height: 32px;
            text-align: center;
            border-radius: 4px;
        }
        .company{
            width: 100%;
            height: 50px;
            background-color: #f3fbfe;
            border-radius: 0px 0px 4px 4px;
            margin-top: 24px;
            line-height: 50px;
            padding-left: 15px;
        }
    // }
    .evaluate {
        width: 100%;
        height: 20px;
        line-height: 20px;
        .ping{
            margin-left: 5px;
            background-color: #ffefdb;
            color: #f5c697;
            text-align: center;
            border-radius: 2px;
            border: 1px solid #ffad4d;
        }
        .num{
            width: 36px;
            color: #f5c697;
            text-align: center;
            border-radius: 2px;
            border: 1px solid #ffad4d;
            border-left-width: 0px;
        }
        img, span{
            display: inline-block;
            vertical-align: middle;
        }
    }
    .evaluate span{
        font-size: 10px;
        width: 18px;
        height: 18px;
        line-height: 18px;
    }
// }
// .containe::v-deep li.number{
//         margin: 0 5px;
//         background-color:#fff;
//         color: #606266;
//         min-width: 30px;
//         border-radius: 2px;
//     }
</style>
